import phaser from "phaser";
import {ProgressBar} from "@/widgets/ProgressBar.ts";

export class SourcePanel {
    private declare scene: Phaser.Scene;
    private declare readonly progress: Phaser.GameObjects.Rectangle;
    private declare timerText: Phaser.GameObjects.Text;
    private declare scoreText: phaser.GameObjects.Text;
    private declare readonly attentionText: phaser.GameObjects.Text;
    private readonly timeCount: number;
    private declare progressBar: ProgressBar;

    // mode: 类型，1-教学 2-评估 3-训练
    constructor(scene: Phaser.Scene, mode: number, attention: number, timeCount: number) {
        this.scene = scene;
        this.timeCount = timeCount;
        const {width} = scene.cameras.main;
        const barHeight = 120
        // 底部半透明遮罩
        scene.add.graphics({
            x: 0, y: 0,
            fillStyle: {
                color: 0x000000,
                alpha: 0.5
            },
        }).fillRect(0, 0, width, barHeight);
        if (mode == 3) { // 训练
            const barWidth = width / 3;
            this.progressBar = new ProgressBar(scene, 200, (barHeight - 24) / 2, barWidth, 24, 12, {
                bgColor: 0xC0C0C0,
                fgColor: 0x55CC66
            });
            if (attention >= 0) { // 训练模式，选择了平均注意力值，展示数值。
                this.progressBar.setProgress(attention / 100);
            }
            this.attentionText = scene.add.text(width / 3 + 240, (barHeight - 32) / 2, `注意力：${attention}`, {
                fontSize: 32,
                color: "#55CC66",
                fontFamily: "Arial",
            });
        }

        // 倒计时时间
        this.timerText = scene.add.text(40, (barHeight - 48) / 2, "03:00", {
            fontSize: 48,
            color: "#9F6D02",
            fontFamily: "Arial",
        });
        // 得分
        this.scoreText = scene.add.text(width - 150, (barHeight - 48) / 2 - 5, "0分", {
            fontSize: 48,
            fontFamily: "Arial",
            fontStyle: 'bold',
            strokeThickness: 5,
            stroke: '#9F6D02'
        });

        this.addEvent();
    }

    private addEvent(): void {
        let totalSeconds = this.timeCount;
        this.scene.time.addEvent({
            delay: 1000,
            callbackScope: this,
            repeat: -1,
            callback: () => {
                totalSeconds--;
                if (totalSeconds < 30) {
                    this.timerText.setStyle({color: '#F21727'});
                }
                this.timerText.text = `${'0' + Math.floor(totalSeconds / 60)}:${('0' + (totalSeconds % 60)).slice(-2)}`;
            },
        });
    }

    updateSource(str: string) {
        this.scoreText.text = `${str}分`;
    }

    updateAttention(value: number) {
        try {
            if (this.attentionText) {
                this.attentionText.text = `注意力：${value}`;
            }
            if (this.progress) {
                this.progress.width = value < 0 ? 0 : value;
            }
        } catch (e) {
            // ignore
            console.log('updateAttention', e)
        }
    }
}